<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>

    <link th:href="@{/easyui/themes/default/easyui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/easyui/themes/icon.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/selfcss/login.css}" rel="stylesheet" type="text/css"/>


    <script th:src="@{/easyui/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/easyui/jquery.easyui.min.js}" type="text/javascript"></script>
    <script th:src="@{/fly/fly.js}" type="text/javascript"></script>
    <script th:src="@{/selfjs/FlyRequest.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/CommonParam.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/aes.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/AesUtil.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/Barrett.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/BigInt.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/pbkdf2.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/RSA.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/SHA.js}" type="text/javascript"></script>
</head>

<body>
<div class="login-panel" id="login-panel">
    <form id="loginform" onsubmit="return false" autocomplete="false" method="post">
        <div class="col-lg-12" style="text-align: center;font-size: 20px;padding-bottom: 10px;">
            欢迎使用MDMS
        </div>
        <div class="input-item">
            <input type="text" name="userCode" placeholder="请输入账号"/>
        </div>
        <div class="input-item">
            <input type="password" name="userPassword" placeholder="请输入密码"/>
        </div>
        <div class="input-item">
            <a href="javascript:checkAndLogin()" id="login"> 登录</a>
        </div>
    </form>
</div>

<!-- 绑定谷歌code模块 -->
<div id="bindGoogleAuthDlg" class="easyui-dialog" style="width:500px;height:450px;padding:10px 20px"
     closed="true" closable="false" modal="true" buttons="#bindGoogleAuthDlg-buttons">
    <form id="bindGoogleAuthForm" method="post" novalidate>
        <input id="binduserid" type="hidden" name="userid"/>
        <img src="" class="height:200px;width:200px" id="bindauthimg" name="authimg">
        <h5>提示：请下载Authy或其它MFA的app扫描二维码，输入一次性密码，然后绑定</h5>
        <table cellpadding="5">
            <tr>
                <td>一次性密码:</td>
                <td><input name="otp" class="easyui-textbox" type="text" required="true" missingMessage="不能为空"/></td>

            </tr>
        </table>
    </form>
</div>
<div id="bindGoogleAuthDlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveBindGoogleAuth()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#bindGoogleAuthDlg').dialog('close')">取消</a>
</div>

<!-- 登录校验谷歌code模块 -->
<div id="googleAuthDlg" class="easyui-dialog" style="width:450px;height:230px;padding:10px 20px"
     closed="true" closable="false" modal="true" buttons="#googleAuthDlg-buttons">
    <form id="googleAuthLoginForm" method="post" novalidate>
        <h5>提示：需输入一次性密码进行二次验证，然后确定</h5>
        <table cellpadding="5">
            <tr>
                <td>一次性密码:</td>
                <td><input name="otp" class="easyui-textbox" type="text" required="true" missingMessage="不能为空"/></td>
            </tr>
        </table>
    </form>
</div>
<div id="googleAuthDlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="googleAuth()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#googleAuthDlg').dialog('close')">取消</a>
</div>

<script type="text/javascript">
    let ctxPath = '[[${#servletContext.contextPath}]]';
    $(function () {
        init(true);
        $("input").keyup(function () {
            if ($.trim($("input[name='userCode']").val()) != "" && $.trim($("input[name='userPassword']").val()) != "") {
                $("#login").css({"cursor": "pointer"});
            } else {
                $("#login").css({"cursor": "not-allowed"});
            }
        });

        $("#login").click(function () {
            if ($.trim($("input[name='userCode']").val()) == "" || $.trim($("input[name='userPassword']").val()) == "") {
                return;
            }
            //TODO ajax提交服务端
            console.info("请求服务端登录....")
        });

        $(window).keydown(function (event) {
            if (event.keyCode == 13) {
                //执行操作
                checkAndLogin();
            }
        })
    });

    $(window).resize(function () {
        init(false);
    });


    var bgImgWidth = 1920;
    var bgImgHeight = 1080;

    function init(initBg) {
        if (initBg) {
            var imageIndex = Math.floor(Math.random() * 10 + 1) + ".jpg";
            $("body").css({"background-image": "url(images/bg" + imageIndex + ")"});
        }

        var windowHeight = $(window).height();
        var windowWidth = $(window).width();
        var left = (windowWidth - bgImgWidth) / 2;
        var top = (windowHeight - bgImgHeight) / 2;
        $("body").css({"backgroundPosition": left + "px " + top + "px"});
        var loginPaneWidth = $("#login-panel").outerWidth();
        var loginPaneHeight = $("#login-panel").outerHeight();
        var paneLeft = (windowWidth - loginPaneWidth) / 2;
        var paneTop = (windowHeight - loginPaneHeight) / 2;
        $("#login-panel").css({"left": paneLeft + "px", "top": paneTop + "px"});
        $("#login-panel").show();
    }


    function checkAndLogin() {
        let submitData = geneSubmitDataFromForm("#loginform", {});
        if (submitData['userCode'] == '') {
            $.messager.show({
                title: '异常',
                msg: '请填写用户名',
                showType: 'show'
            });
            return;
        }

        if (submitData['userPassword'] == '') {
            $.messager.show({
                title: '异常',
                msg: '请填写密码',
                showType: 'show'
            });
            return;
        }

        //登录
        postJSON(ctxPath + '/login/getOtp', {},
            function (data) {
                let otpcode = data['otpcode'];
                let otp = data['otp'];
                setMaxDigits(130);
                let rsakey = new RSAKeyPair("10001", "10001", otp, 512); //公钥
                let password = sha1(submitData['userPassword']);
                let passwordenc = encryptedString(rsakey, password, RSAAPP.PKCS1Padding);
                console.log('passwordenc:' + passwordenc);
                submitData['userPassword'] = passwordenc;
                submitData['otpCode'] = otpcode;

                postJSON(ctxPath + '/login/login', submitData,
                    function (data) {
                        let action = data['action'];
                        if ('0' == action) {
                            let userName = data['userName'];
                            postJSON(ctxPath + '/initSpringSecurity?username=' + userName + '&password=123456', {},
                                function (data) {
                                    location.href = ctxPath + '/mainframe';
                                }, function (result, resultdesc) {
                                    $.messager.show({
                                        title: '异常',
                                        msg: result + '-' + resultdesc,
                                        showType: 'show'
                                    });
                                }, function () {
                                    alert(3)
                                }, function () {
                                    $.messager.progress(COMMONPARAM_PROCESS);
                                }, function () {
                                    $.messager.progress('close');
                                });

                        } else if ('10' == action) {
                            //需要绑定Google密钥
                            let googleauthenticatorbarcode = data['googleauthenticatorbarcode'];
                            let userid = data['userid'];
                            openBindGoogleAuthForm(userid, googleauthenticatorbarcode);
                        } else if ('11' == action) {
                            //需要进一步用Google密钥认证
                            $('#googleAuthDlg').dialog('open').dialog('setTitle', 'MFA二次认证');
                        } else if ('2' == action) {

                        }

                    }, function (result, resultdesc) {
                        $.messager.show({
                            title: '异常',
                            msg: result + '-' + resultdesc,
                            showType: 'show'
                        });
                    }, function () {
                        alert(3)
                    }, function () {
                        $.messager.progress(COMMONPARAM_PROCESS);
                    }, function () {
                        $.messager.progress('close');
                    });
            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });

    }

    function openBindGoogleAuthForm(userid, googleauthenticatorbarcode) {
        $("#bindauthimg").attr("src", "data:image/png;base64," + googleauthenticatorbarcode);
        $("#binduserid").val(userid);
        $('#bindGoogleAuthDlg').dialog('open').dialog('setTitle', '绑定MFACode');
    }

    function saveBindGoogleAuth() {
        if (!$('#bindGoogleAuthForm').form('validate')) {
            return;
        }

        let submitData = geneSubmitDataFromForm("#bindGoogleAuthForm", {});
        postJSON(ctxPath + '/login/bindGoogleAuth', submitData,
            function (data) {
                $.messager.show({
                    title: '提示',
                    msg: '绑定成功，请继续登录',
                    showType: 'show'
                });
                $('#bindGoogleAuthDlg').dialog('close')
            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });
    }

    function googleAuth() {
        if (!$('#googleAuthLoginForm').form('validate')) {
            return;
        }

        let submitData = geneSubmitDataFromForm("#googleAuthLoginForm", {});
        postJSON(ctxPath + '/login/googleAuth', submitData,
            function (data) {
                let userName = data['userName'];
                postJSON(ctxPath + '/initSpringSecurity?username=' + userName + '&password=123456', {},
                    function (data) {
                        $.messager.show({
                            title: '提示',
                            msg: '登录成功，即将跳转首页',
                            showType: 'show'
                        });
                        location.href = ctxPath + '/mainframe';
                    }, function (result, resultdesc) {
                        $.messager.show({
                            title: '异常',
                            msg: result + '-' + resultdesc,
                            showType: 'show'
                        });
                    }, function () {
                        alert(3)
                    }, function () {
                        $.messager.progress(COMMONPARAM_PROCESS);
                    }, function () {
                        $.messager.progress('close');
                    });
            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });
    }
</script>
</body>
</html>
</html>